<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/17 8:26
    @Version 1.0
    @Description 定时器的使用
  -->
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    div {float: left;margin: 10px}
    #div1 {width: 50px;height: 50px;background: red}
    #div2 {width: 250px;height: 250px;background: #3fff1a;display: none}
</style>
<script>
    window.onload = function () {
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var timer = null;

        // oDiv1.onmouseover=function () {//移入div1开始显示
        //     clearTimeout(timer);  //解决从div2移入div1消失的问题
        //     oDiv2.style.display='block';
        // };
        // oDiv1.onmouseout = function () { //移出div1开始缓慢消失
        //     timer = setInterval(function () {
        //         oDiv2.style.display='none';
        //     },1000);
        // };
        // oDiv2.onmouseover = function () { //
        //     clearTimeout(timer);//进入div2将定时器关闭，不然进入div2时随着延时时间消失div也消失。
        // };
        // oDiv2.onmouseout = function () {
        //     timer = setTimeout(function () {
        //         oDiv2.style.display = "none"; //延时1秒后消失,不然移除div2再进入div1的时候会有闪现
        //     },1000);
        // };
        //简化代码
        oDiv2.onmouseover = oDiv1.onmouseover=function () {
            clearTimeout(timer);
            oDiv2.style.display='block';
        };
        oDiv2.onmouseout = oDiv1.onmouseout = function () {
            timer = setInterval(function () {
                oDiv2.style.display='none';
            },1000);
        };
    };
</script>

</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

</body>
</html>